Bölüm 7 (HTML Dersleri)
HTML ile kendi web sayfalarınızı oluşturabilirsiniz. W3Schools.com ‘dan yapacağım bu çeviriler ile HTML’yi kolaylıkla öğrenebileceksiniz. HTML’nin öğrenmesi kolaydır ve zevkli bulacaksınız bu dili.
Başlangıç olarak bilgi; çevirileri(başlıklar hariç) çift tırnak içinde göstereceğim. Kendi yazdıklarım normal yazı olarak kalacak. Anlatacaklarımı uygulayabilmeniz için ilk önce klasör seçeneklerini bulmanız ve klasör uzantılarını göster halini seçmelisiniz. Ardından istediğiniz bir alanda(mesela masaüstünde) bir klasör açın web ismini verin. Klasörün içine girin(fare ile çift tık). Fare ile sağ tuş tıklayın ve metin belgesi(yeni metin.txt diye yazar) dosyasını oluşturun. Biz bu yeni metin.txt dosyası ile HTML dosyalarımızı oluşturacağız. Yeni metin.txt dosyasını açın ve farklı kaydete tıklayın. Açılan pencerede isim kısmına index.html yazın ve kaydedin web klasörümüzün içine. index.html klasörüne çift tıklayın ve browser(chrome, firefox, opera, internet explorer gibi)’da görebilelim. Artık web klasörümüzün içinde yeni metin.txt ve index.html adlı iki dosya olacağını biliyorsunuz ve artık hazırsınız. Bunu hazırlayamadıysanız bile, örnekleri uygulayabilmeniz için W3Schools‘taki metin editörünü paylaşmış olacağım. Sol taraftaki verileri silip, etiketleri(anlatacağım) yazarsınız ve edit and click me yazan yere basarsınız sağ tarafta da web sayfasının durumunu görebilirsiniz böylece. Bu benim ilk çalışmam. Umarım hepimize yararlı olur. Anlaşılmayan yerleri yorum olarak yazabilirsiniz/sorabilirsiniz. Kolay gelsin.
HTML Yazı(text) Biçimlendirme(formatting)
HTML Biçimlendirme Etiketleri
HTML <b> ve <i> gibi etiketleri kullanarak çıktıyı biçimlendirir bold ve italik yazı gibi. Bu etiketlere biçimlendirme etiketleri denir.
<b>bu kalın yazılmıştır.</b>
<i>bu italik yazılmıştır.</i>
Sıklıkla <strong>, <b> olarak; <em> de <i> olarak yorumlanır.
Bununla birlikte, anlam farkı mevcuttur bu yorumlanan kodlarda.
<b> ile <i> kalın ile italik yazıyı temsil eder sadece. <strong> ile <em> ise kullanıcının tarayıcı tarafından yorumlananların “önemli olma” derecesini görmesini sağlamaktadır. Günümüzde, tüm bilinen tarayıcılar strong’u bold olarak em’i de italik olarak algılamakta daha doğrusu sunmaktadır. Fakat gün gelir de tarayıcılar strong etiketli yazıların üzerini renklendirirse sarıyla hatalı bir örneğimiz olur ve bold olarak tanımlayamayız.
Buraya tıklayarak bu kodların denemesini yapabilirsiniz.
HTML Yazı Biçimlendirme Etiketleri
| etiket | tanımlar |
|---|---|
| <b> | Kalın yazı |
| <big> | Büyük yazı/karakterler |
| <em> | Vurgulu yazı |
| <i> | İtalik yazı |
| <small> | Küçük yazı/karakterler |
| <strong> | Güçlü yazı/tarayıcı vurgusu |
| <sub> | Alt indisli yazı |
| <sup> | Üst indisli yazı |
| <ins> | Eklenen yazı |
| <del> | Silinen yazı |
HTML “Bilgisayar Çıkışı” Etiketleri
| Etiket | Tanım |
|---|---|
| <code> | Bilgisayar kod yazısı |
| <kbd> | Klavye yazısı |
| <samp> | Örnek bilgisayar kod yazısı |
| <tt> | Defines teletype text |
| <var> | Bir değişken/kararsız yazı |
| <pre> | Biçimlendirilmiş yazı |
HTML Alıntıları ve Tanımlama etiketleri
| Etiket | Tanım |
|---|---|
| <abbr> | Bir kısaltma tanımlar |
| <acronym> | Bir eş anlamlı tanımlar |
| <address> | Yazar ya da belge sahibinin bilgilerini sunar |
| <bdo> | Yazının yönünü tanımlar |
| <blockquote> | Uzun bir alıntı tanımlar |
| <q> | Kısa bir alıntı tanımlar |
| <cite> | Eserden alıntı tanımlar |
| <dfn> | Terim anlamını tanımlar |
Bu dersimiz burada bitmiştir yine. Benim de gözlemlediğim kadarıyla artık her yerde hTML5’e değiniliyor ve kullanılıyor. Ben de sizlere bunu sunuyorum açıklamalarıyla. Umarım yararlı olur.
Aşağıda da şimdiye kadarki anlatımlarımızın özeti ve örneği(birkaçı hariç) yer almakta. Uygulamaları unutmayın lütfen.
Buradan indirebilirsiniz.
Teşekkürler…